 <template>
 	<view class="container">
 		<!-- 就诊记录 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">就诊记录</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>医院：</text>
 					<text>{{ model.hospital_name }}</text>
 				</view>
 				<view class="content-item">
 					<text>科室：</text>
 					<text>{{ model.project_name }}</text>
 				</view>
 				<view class="content-item">
 					<text>医生：</text>
 					<text>{{ model.doctor_name }}</text>
 				</view>
 				<view class="content-item" >
 					<text>就诊日期：</text>
 					<text>{{ model.treatment_date }} {{ model.treatment_time }}-{{ model.treatment_end_time }}</text>
 				</view>
				<view class="content-item">
					<text>挂号费用：</text>
					<text>{{ model.price }}元</text>
				</view>
 			</view>
 		</view>

 		<!-- 用药 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">用药</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item" v-for="(item, index) in drugs" :key="index">
 					<text>药品（ {{index + 1}} ）：</text>
 					<text>{{ item.name }} {{ item.unit }}</text>
 				</view>
 			</view>
 		</view>

 		<!-- 诊断 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">诊断</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item line-height">
                    {{ model.diagnosis }}
 				</view>
 			</view>
 		</view>

		<!-- 医嘱 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">医嘱</view>
			</view>
			<view class="content-box">
				<view class="content-item line-height">
					{{ model.doctor_orders }}
				</view>
			</view>
		</view>
 	</view>


 </template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow, onReady} from '@dcloudio/uni-app'
    import {getPatientCaseInfo} from "@/api/user";

	const model = reactive({
		hospital_name: '',
		doctor_name: '',
		project_name: '',
		treatment_date: '',
		treatment_time: '',
		treatment_end_time: '',
		price: 0,
        diagnosis: '', // 诊断
        doctor_orders: '', // 医嘱
	})

    // 药品
    const drugs = ref([])

    const caseId = ref(0)

    onLoad((evt) => {
        console.log(evt)
        caseId.value = evt?.case_id ?? 0
        if (caseId.value > 0) {
            handleGetCaseInfo()
        }
    })

    // 获取就诊详情.
    const handleGetCaseInfo = async () => {
        const {code, data} = await getPatientCaseInfo({case_id: caseId.value})
        if (code == 1) {
            model.hospital_name = data?.hospital_name ?? ''
            model.doctor_name = data?.doctor_name ?? ''
            model.project_name = data?.project_name ?? ''
            model.treatment_date = data?.treatment_date ?? ''
            model.treatment_time = data?.treatment_time ?? ''
            model.treatment_end_time = data?.treatment_end_time ?? ''
            model.price = data?.order?.price ?? 0
            model.diagnosis = data?.diagnosis ?? ''
            model.doctor_orders = data?.doctor_orders ?? ''
            // 药品
            drugs.value = data?.drugs ?? []
        }
    }

	const goDetail = () => {
		uni.navigateTo({
			url: '/mine/medical/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 52rpx 26rpx;
	}
	.order-item {
		margin-bottom: 30rpx;
		padding: 38rpx 38rpx 1rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		.status-box {
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #E8E8E8;
			margin-bottom: 30rpx;

			.name {
				font-size: 30rpx;
				color: #312C2A;
			}

			.status {
				color: #6087EF;
			}

			.status1 {
				color: #AAAAAA;
			}
		}

		.content-box {
			width: 100%;
			position: relative;
			font-size: 26rpx;
			color: #606672;

			.content-item {
				@include between(100%);
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #606672;

				&>text {
					&:nth-child(2) {
						color: #312C2A;
					}
				}
			}
			.line-height {
				line-height: 43rpx;
			}

			.icon {
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 99;
			}
		}
	}
</style>
